<template>
    <div class="person">
       <!-- <h2>{{ a }}</h2> -->
       <ul>
        <li v-for="peo in list">
            {{ peo.name }}--{{ peo.age }}--{{ peo.render }}
        </li>
       </ul>
    </div>
</template>

<script lang="ts" setup name="Person"> 
    import {ref,reactive,defineProps, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue';
    import { type PersonInter ,type PersonList} from '@/type';
    withDefaults(defineProps<{list?:PersonList}>(),{
        list:()=>[{
            name:'江燕云',age: 23,render:'高级'},
        ]
    })
    //创建
    console.log('创建');
    //挂载
    onBeforeMount(()=>{
        console.log('挂载前')
    })
    onMounted(()=>{
        console.log('挂载后')
    })
    //更新前
    onBeforeUpdate(()=>{
        console.log('更新前');
    })
    //更新后
    onUpdated(()=>{
        console.log('更新后');
    })
    //销毁前
    onBeforeUnmount(()=>{
        console.log('销毁前')
    })
    //销毁后
    onUnmounted(()=>{
        console.log('销毁后');
    })
</script>

<style scoped>  
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        /* height: 150px; */
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>